<template>
    <div class="main3">
        <div class="ball">
            <img src="../../../assets/indexImg/three_human.jpg" alt="">
        </div>
        <transition name="bottom">
        <div class="news" v-show="$store.state.isFlag==2">
            <img src="../../../assets/indexImg/three_news.png" alt="">
        </div>
        </transition>
        <div class="img-box">
        <div class="wy">
            <transition name="top">
            <router-link :to="`/newsdetail?id=69`" tag="div" v-show="$store.state.isFlag==2">
                    <img src="http://www.shangyuninfo.com/api/profile/product/2019/03/28/77412d6f46331e42353d97cb32b04fac.jpg" alt="" class="wy-img">
            </router-link>
            </transition>
            <transition name="bottom">
                <router-link to="/myinfo" tag="div" v-show="$store.state.isFlag==2">
                    <img src="../../../assets/indexImg/three_more.jpg" alt="" class="more">
                </router-link>
            </transition>
        </div>
        </div>
    </div>
</template>

<script>
    import {getNewsList} from "../../../api";
    export default {
        name: "three",
        data(){
            return{
                imgData:"",//网易数据
            }
        },
        methods:{

        },
        created() {
            getNewsList(69).then(res=>{
                console.log(res)
                this.imgData=res;
            })
        },
    }
</script>

<style scoped lang="less">
    .top-enter {
        opacity: 0;
        transform: translate(100px);
    }
    .bottom-enter{
        opacity: 0;
    }
    .top-enter-active{
        transition: all 1s linear;
    }
    .bottom-enter-active {
        transition: all 1s linear 1s;
    }
.main3 {
    background: black;
    width: 100%;
    height: 100%;
    .ball {
        position: absolute;
        left: 15%;
        height: 80%;
        width: 45%;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .news {
        position: absolute;
        bottom: -6%;
        height: 40%;
        left: 15%;
        z-index: 100;
        min-width: 500px;
        /*img {*/
        /*    !*width: 518px;*!*/
        /*    !*height: 212px;*!*/
        /*}*/
    }
    .img-box {
        width: 40%;
        position: absolute;
        right: 13%;
        top: 10%;
        min-width: 500px;
        height: auto;
        .wy {
            img {
                height: 100%;
                width: 100%;
                display: block;
                cursor: pointer;

            }
        }
    }
}
</style>